import store from '@/store';
/**
 * 
 * @param {*} str 
 * @returns 
 * 实现思路：
 * 1.以背景（雪碧图）的形式插入图片，
 * 2.设置插入表情包元素的dom标签的width、height值，控制雪碧图的background-position属性来回显对应的表情包
 * 3.表情包的数据格式为数组：['[微笑]', '[撇嘴]'...]，是为了提交的时候可以提交对应的数据
 * 4.表情包的回显是通过遍历的形式，将数组的每一项（'[微笑]'）替换成dom元素，找出表情包的布局规则，动态设置background-position值
 * 
 */

//表情包回显
export function wxEmojis(str) {
  let iconArr = store.getters.wxEmojisData; //存放表情包的数组
  iconArr.forEach((item, index) => {
    if (str.indexOf(item) !== -1) {
      let bgLeft = "", //横坐标
        bgTop = "", //纵坐标
        bhPosition = "0 0", //雪碧图的横坐标、纵坐标
        icoLen = 7, //表情包-行的个数
        icoHeight = 36; //每个表情包的高度   
      if (index < 7) {
        //第一列的表情包
        bgLeft = -(24 * index + (16.8 * index)) + 'px';
        bgTop = 0;
        bhPosition = bgLeft + ' ' + bgTop;
      } else if (index >= 7) {
        let icoColumn = parseInt(index / 7);//表情包第几列
        bgLeft = -(24 * (index - (icoColumn * icoLen)) + (16.8 * (index - (icoColumn * icoLen)))).toFixed(2) + 'px';
        bgTop = -(icoColumn * icoHeight) + 'px';
        bhPosition = bgLeft + ' ' + bgTop;
      }
      str = str.replaceAll(item, '<i class="wxEmojis" contenteditable="false" style="background-position:' + bhPosition + '" data-value=' + item + '></i>');
    }
  })
  return str;
}

